<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%" :row-class-name="tableCellClassName"
      :span-method="arraySpanMethod">
      <el-table-column
        prop="class"
        label="class"
        min-width="180"
        align="center" >
      </el-table-column>
      <el-table-column
        prop="describe"
        label="描述"
        min-width="180"
        align="center" >
      </el-table-column>
      <el-table-column
        prop="note"
        label="备注"
        min-width="180"
        align="center" >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          class: 'class="fs-10"',
          describe: '字体',
          note: '',
          name:"fs-10"
        }, {
          class: 'class="fs-12"',
          describe: '字体',
          note: '',
          name:"fs-12"
        },{
            class: '...',
            describe: '...',
            note: '',
            name:"..."
          },{
            class: 'class="fs-20"',
            describe: '字体',
            note: '',
            name:"fs-20"
          },{
          class: 'class="fs-22"',
          describe: '字体',
          note: '',
          name:"fs-22"
        },{
          class: 'class="fc-warm"',
          describe: '颜色',
          note: '',
          name:"fc-warm"
      },{
          class: 'class="fc-blue"',
          describe: '颜色',
          note: '',
          name:"fc-blue"
        },{
          class: 'class="fc-red"',
          describe: '颜色',
          note: '',
          name:"fc-red"
        },{
          class: 'class="fc-green"',
          describe: '颜色',
          note: '',
          name:"fc-green"
        },{
          class: 'class="fc-gray"',
          describe: '颜色',
          note: '',
          name:"fc-gray"
        },{
          class: 'class="margin"',
          describe: 'margin：0；外边距为0',
          note: '',
          name:""
        },{
          class: 'class="cursor"',
          describe: '设置鼠标样式，鼠标滑到此处看效果',
          note: '',
          name:"cursor"
        },{
          class: 'class="ellipsis"',
          describe: '内容超出省略号表示，须先设置width',
          note: '',
          name:"ellipsis"
        },{
          class: 'class="float-left"',
          describe: '左浮动',
          note: '',
          name:""
        },{
          class: 'class="float-right"',
          describe: '右浮动',
          note: '',
          name:""
        },{
          class: '更多请看spider-vue/src/style/common.less',
          describe: '',
          note: '',
          name:""
        }
        ]
      }
    },
    methods:{
      tableCellClassName({row, rowIndex}){
        return this.tableData[rowIndex].name
      },
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex == 15) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },
    }
  }
</script>

<style lang="less" >
  important
  .el-table .back{
  background-color: green;
}
</style>
